<template>
    <div class="r_main">
        <div class="tabIn">
            <div class="tab">
                社区严选
            </div>
        </div>
        <div class="form_con">
            <div class="outer">
                <p class="title">
                    {{ info.title }}
                </p>
                <div class="content" v-html="info.content"></div>
                <div class="basic">
                    <div>
                        <span>活动时间：</span>
                        <span>{{ info.start_time }} ~ {{ info.end_time }}</span>
                    </div>
                    <div>
                        <span>管理费：</span>
                        <span>{{ info.fee }}元</span>
                    </div>
                    <div class="selet">
                        <span>选择专栏：</span>
                        <div>
                            <el-select v-model="col_id" placeholder="请选择专栏">
                                <el-option v-for="item in cols" :key="item.id" :label="item.title"
                                    :value="item.id"></el-option>
                            </el-select>
                            <el-option disabled class="load-more" v-if="showMore1">
                                <span @click="loadc">加载更多...</span>
                            </el-option>
                            <span>（一次只能选择一个专栏，如果有多个请多次提交）</span>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <el-button @click="openCol">提交申请</el-button>
                </div>
            </div>
            <el-dialog :visible.sync="showPay" width="400px" @close="clearTimer">
                <span slot="title" class="dialog-header">
                    <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信扫码支付
                </span>
                <div style="display: flex;align-items: center;justify-content: center;">
                    <img v-loading="Loading" style="max-width: 300px;max-height: 300px;" :src="pay_img" alt="">
                </div>
            </el-dialog>


            <el-dialog top="40vh" title="提示" :visible.sync="showCol" width="350px">
                <span slot="title" class="dialog-header" style="font-size: 18px;">
                    <i style="color:#d41f19;margin-right: 12px;" class="el-icon-money"></i>严选支付方式
                </span>
                <span class="dialog-footer2">
                    <el-button type="success" @click="buyNow(1)">微信支付</el-button>
                    <el-button type="primary" @click="buyNow(2)">余额支付</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

</template>
<script>

import { baseUrl } from '@/apis/index'

export default {
    data() {
        return {
            column: 1,
            content: '一、活动背景 劳动节，又称“五一国际劳动节”，是全世界劳动人民共同庆祝的节日。百日劳动竞赛即将拉开帷幕，当中**充分调动了工作',
            info: {},
            cols: [],
            col_id: '',
            pay_img: '',
            showPay: false,
            timer: null,
            showCol: false,

            totalPagec: 1,
            pageNumc: 1,
            loadingc: false,
            showMore1: false

        }
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
        this.getInfo()
        this.getCols()

    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    methods: {
        loadc() {
            var page = this.pageNumc
            //如果请求未结束就返回不连续请求
            if (this.loadingc) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPagec) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumc = page
            this.getCols()
        },
        // 绑定专栏列表
        // getCols() {
        //     this.$api.getCols().then(res => {
        //         if (res.data.code == 1) {
        //             this.cols = res.data.data
        //         }
        //     })
        // },

        // 绑定专栏列表
        getCols() {
            this.loadingc = true

            let params = {
                page: this.pageNumc,
            }
            this.$api.getCols(params).then(res => {
                if (res.data.code == 1) {
                    let response = res.data.data
                    this.totalPagec = response.last_page
                    if (this.totalPagec <= this.pageNumc) {
                        this.showMore1 = false
                    } else {
                        this.showMore1 = true
                    }
                    this.cols = this.cols.concat(response.data)
                    this.loadingc = false
                }
            })
        },


        getInfo() {
            this.$api.getActInfo().then(res => {
                if (res.data.code == 1) {
                    this.info = res.data.data
                } else {
                    // 没有活动就返回上一页
                    this.$router.back()
                }
            })
        },
        goPage() {
            this.$router.push('/promotion/advertApply')
        },
        confirm(item) {
            console.log(item);

        },
        load() {

        },

        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        query_pay(id) {
            // 3秒定时执行
            this.timer = setInterval(() => {
                let params = {
                    id
                }

                this.$api.queryAct(params).then(res => {
                    if (res.data.code == 1) {
                        this.showPay = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.clearTimer()
                        this.$router.back()
                    }
                })
            }, 3000)
        },

        openCol() {
            let col_id = this.col_id
            if (!col_id) {
                this.$message({
                    message: '请选择专栏',
                    type: 'error'
                })
                return
            }

            this.showCol = true
        },

        buyNow(op) {
            let params = {
                id: this.info.id,
                col_id: this.col_id,
                pay_op: op
            }
            this.$api.payAct(params).then(res => {
                if (res.data.code == 1) {
                    this.showCol = false
                    if (op == 1) {
                        this.showPay = true
                        this.pay_img = baseUrl + 'home/base/qrcod?url=' + res.data.data.code_url;
                        this.query_pay(res.data.data.id)
                    } else {
                        this.$message({
                            message: '购买成功',
                            type: 'success'
                        })
                        this.$router.back()
                    }


                }
            })
        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.dialog-footer2 {
    display: flex;
    justify-content: center;

    button {
        width: 90px;
        height: 40px;
        font-size: 15px;
        line-height: 40px;
        padding: 0;
    }
}

.r_main {
    width: 100%;

    .tabIn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 0;
        background-color: #E5E5E5;
        position: sticky;
        top: 99px;
        z-index: 99;
        padding: 0 23px;
        height: 60px;

        // border-top: 0.05rem solid #E8E8E8;
        .tab {
            font-weight: bold;
            font-size: 24px;
            color: #1068E7;
        }



    }


    .form_con {
        min-height: 500px;

        // overflow-y: auto;
        .outer {
            padding: 0 50px;

            .title {
                padding: 23px 0 43px;
                font-weight: bold;
                font-size: 36px;
                color: #1068E7;
                text-align: center;
            }

            .basic {
                margin-top: 65px;
                display: flex;
                flex-direction: column;

                >div {
                    display: flex;
                    align-items: center;
                    font-weight: 400;
                    font-size: 18px;
                    color: #333333;
                    margin-bottom: 29px;

                    >span:first-child {
                        display: inline-block;
                        width: 120px;
                        text-align: right;
                    }
                }

                .selet {
                    >div {
                        >span {
                            color: #999999;
                        }
                    }
                }
            }

            .btn {
                display: flex;
                justify-content: center;

                >button {
                    width: 260px;
                    height: 48px;
                    background: #1068E6;
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 20px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 48px;
                    padding: 0;
                    margin-top: 50px;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {

.r_main {
    .tabIn {
    height: 40px;
    padding: 0 20px;

    .tab {
        font-size: 15px;
    }

    .btn2 {
        font-size: 12px;
        width: 60px;
        height: 20px;
        line-height: 20px;
    }
   
}
.form_con{
    .outer{
        .title{
            font-size: 15px;
            margin: 20px 0;
        }
        .basic{
            >div{
                margin-bottom: 20px;
                font-size: 13px;
                >span{
                   &:first-child{
                    flex-shrink: 0;
                    text-align: left ;
                    width: 100px ;
                   }
                }
            }
        }
        .btn{
            >button{
                width: 130px;
                height: 35px;
                font-size: 13px;
                line-height: 35px;
            }
        }
    }
}

}

}
</style>